<template>
    <div class="comment">
        <div class="detail" v-for="(item,index) in commentData" :key="index">
            <div class="detail-b">
            <div class="left">
                <div class="header-content">
                    <img :src="'http://' + item.user_image_url">
                    <span class="nick-name">{{ item.nickname }}</span>
                </div>
            </div>
            <div class="right">
                <div class="star">
                    <img src="@/assets/images/goods/star.png" v-for="index in item.score" :key="index">
                    <img src="@/assets/images/goods/star1.png" v-for="index in (5-item.score)" :key="index">
                </div>
                <div class="text">
                    {{ item.content }}
                </div>
                <div class="time">
                    {{ item.create_time.replace('T',' ').replace('Z',' ') }}
                </div>
            </div>
            </div>
            <hr>
        </div>

        <div class="change_page">
            <div class="block">
                <el-pagination
                layout="pre,pager,next"
                :total="commentCount"
                :page-size="15"
                @current-change="handleCurrentChange"
                >
                </el-pagination>
            </div>
        </div>
            <!-- 我是评论数量{{ commentCount }} -->
    </div>
</template>

<script setup>
    import { onMounted,ref } from 'vue'
    import { getCommentCountData,getGoodsCommentData  } from '@/network/comment'
    let skuId = defineProps(['skuId'])

    const commentData = ref([])
    const commentCount = ref(0)
    let page = ref(1)

    const getCommentCount = async () => {
        const result = await getCommentCountData(skuId.skuId)
       
        commentCount.value = result
        
    }

    const getGoodsComment = async (val) => {

        const result = await getGoodsCommentData(skuId.skuId,val)
       
        commentData.value = result 
        
    }

    const handleCurrentChange = (val) => {
        getGoodsComment(val)
    }

    onMounted(() => {
        getCommentCount()
        getGoodsComment(page.value)
    })


</script>

<style lang="less" scoped>
    .comment {
        .detail-b {
            display: flex;
            .left {
                .header-content {
                    img {
                        width: 25px;
                        height: 25px;
                        border-radius: 20px;
                    }
                    .nick-name {
                        margin-left: 10px;
                    }
                }
            }
            .right {
                width: 830px;
                margin-left: 70px;
                .star {
                    img {
                        width: 14px;
                        height: 14px;
                    }
                }
                .text {
                    color: #333;
                    font-size: 14px;
                    margin-top: 10px;
                }
                .time {
                    color: #999;
                    margin-top: 10px;
                }
            }
        }
        hr {
            margin-bottom: 10px;
            margin-top: 10px;
            border: 1px solid #ddd;
        }
        .change_page {
            margin-top: 20px;
            margin-left: 75%;
            margin-bottom: 20px;
        }
    }
</style>


